<script setup lang="ts">
import {
  Tabs,
  TabPane,
  Form,
  FormItem,
  Button,
  Input,
  Checkbox,
  InputPassword,
} from "ant-design-vue";
import { reactive, ref, toRefs } from "vue";
import { useCountDown } from "@/utils/validUse";
import { notify } from "@/utils/anted";
import { useAuthStore } from "@/stores/auth";
import { useRouter, useRoute } from "vue-router";

const { start, formatTime } = useCountDown();
const authStore = useAuthStore();
const router = useRouter();
const route = useRoute();
const formState = reactive({
  loading: false,
  loginData: {
    username: authStore.rememberData?.username,
    password: authStore.rememberData?.password,
    phone: "",
    code: "",
  } as LoginData,
  isRemember: true,
});

const { loading, isRemember, loginData } = { ...toRefs(formState) };

const codeActive = ref(false);

const onFinish = async (values: any) => {
  try {
    // 登录中
    formState.loading = true;
    // 记住密码
    authStore.setRememberPwd(
      formState.isRemember ? formState.loginData : undefined
    );
    // 触发action，发送登录请求
    await authStore.userLogin(formState.loginData);
    // console.log('submitForm', res);
    // 跳转到来源地址  login?redirect=/home
    router.replace({ path: <string>route.query?.redirect || "/" });
  } catch (error) {
  } finally {
    setTimeout(() => {
      formState.loading = false;
    }, 300);
  }
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};

const emit = defineEmits(["reg"]);
const activeKey = ref("1");
const handleReg = () => {
  emit("reg");
};

const handleCode = () => {
  codeActive.value = false;
  notify("发送成功！", { type: "success" });
  start(1);
  setTimeout(() => {
    codeActive.value = true;
  }, 1000);
};
</script>
<template>
  <Tabs v-model:activeKey="activeKey" centered>
    <TabPane key="1" tab="账号密码登录" />
    <TabPane key="2" tab="手机号登陆" force-render />
  </Tabs>
  <div class="w-100 mt-5">
    <Form
      :model="loginData"
      name="normal_login"
      class="login-form"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <FormItem
        v-if="activeKey === '1'"
        label="账号"
        name="username"
        :rules="[{ required: true, message: '请输入账号!' }]"
      >
        <Input v-model:value="loginData.username">
          <template #prefix>
            <svgIcon name="ant-UserOutlined" color="#3B82F6" />
          </template>
        </Input>
      </FormItem>

      <FormItem
        v-if="activeKey === '1'"
        label="密码"
        name="password"
        :rules="[{ required: true, message: '请输入密码!' }]"
      >
        <InputPassword v-model:value="loginData.password">
          <template #prefix>
            <svgIcon name="ant-LockOutlined" color="#3B82F6" />
          </template>
        </InputPassword>
      </FormItem>
      <FormItem
        v-if="activeKey === '2'"
        label="手机号"
        name="phone"
        :rules="[{ required: true, message: '请输入手机号!' }]"
      >
        <Input v-model:value="loginData.phone">
          <template #prefix>
            <svgIcon name="ant-PhoneOutlined" color="#3B82F6" />
          </template>
        </Input>
      </FormItem>
      <FormItem
        v-if="activeKey === '2'"
        label="验证码"
        name="code"
        :rules="[{ required: true, message: '请输入验证码!' }]"
      >
        <div class="flex">
          <Input v-model:value="loginData.code">
            <template #prefix>
              <svgIcon name="ant-MailOutlined" color="#3B82F6" />
            </template>
          </Input>
          <div>
            <Button class="ml-2 w-30" v-if="!codeActive" @click="handleCode"
              >获取验证码</Button
            >
            <Button class="ml-2 w-30" disabled v-else>
              {{ formatTime }}
            </Button>
          </div>
        </div>
      </FormItem>

      <FormItem>
        <div class="flex justify-between">
          <FormItem no-style>
            <Checkbox v-model:checked="isRemember">记住我</Checkbox>
          </FormItem>
          <div class="cursor-pointer text-blue-500">忘记密码</div>
        </div>
      </FormItem>

      <FormItem>
        <Button class="w-full" type="primary" html-type="submit" :loading="loading"> 登录 </Button>
      </FormItem>
    </Form>
    <div class="flex justify-between">
      <div class="flex justify-around">
        <div>其他登录方式:</div>
        <div class="flex justify-around w-30">
          <svgIcon
            class="cursor-pointer"
            name="ant-AlipayCircleOutlined"
            color="#3B82F6"
          />
          <svgIcon
            class="cursor-pointer"
            name="ant-WechatOutlined"
            color="#3B82F6"
          />
          <svgIcon
            class="cursor-pointer"
            name="ant-QqOutlined"
            color="#3B82F6"
          />
          <svgIcon
            class="cursor-pointer"
            name="ant-WeiboOutlined"
            color="#3B82F6"
          />
        </div>
      </div>
      <div>
        <a class="cursor-pointer text-blue-500" @click="handleReg">注册账号</a>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less"></style>
